<template>
    <div>
        <!--<form>-->
            <p>11111</p>
            <!--<el-select v-model="value" placeholder="请选择">-->
                <!--<el-option-->
                        <!--v-for="item in options"-->
                        <!--:key="item.value"-->
                        <!--:label="item.label"-->
                        <!--:value="item.value">-->
                <!--</el-option>-->
            <!--</el-select>-->
        <!--</form>-->
        <!--<baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">-->
            <!--&lt;!&ndash;缩放&ndash;&gt;-->
            <!--<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>-->
            <!--&lt;!&ndash;定位&ndash;&gt;-->
            <!--<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>-->
            <!--<bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>-->
        <!--</baidu-map>-->
    <!--</div>-->
</template>

<script>
import {hotelPoint} from '@api/hotel'

export default {
  name: 'testMap',
  data: () => ({
    map: {
      center: {lng: 116.291281, lat: 39.836822},
      zoom: 15,
      show: true,
      dragging: true
    },
    options: [{
      value: '选项1',
      label: '锦江区'
    }, {
      value: '选项2',
      label: '青羊区'
    }, {
      value: '选项3',
      label: '金牛区'
    }, {
      value: '选项4',
      label: '武侯区'
    }, {
      value: '选项5',
      label: '成华区'
    }, {
      value: '选项6',
      label: '龙泉驿区'
    }, {
      value: '选项7',
      label: '青白江区'
    }, {
      value: '选项8',
      label: '新都区'
    }, {
      value: '选项9',
      label: '温江区'
    }, {
      value: '选项10',
      label: '双流区'
    }, {
      value: '选项11',
      label: '郫都区'
    }, {
      value: '选项12',
      label: '新津区'
    }],
    points: [],
    point1: []
  }),
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      // 鼠标缩放
      map.enableScrollWheelZoom(true)
      // 点击事件获取经纬度
      map.addEventListener('click', function (e) {
        console.log(e.point.lng, e.point.lat)
      })
    },
    clickHandler (e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`)
    },
    addPoints () {
      const points = []
      for (var i = 0; i < 10; i++) {
        const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
        // 获取后端传过来的位置的属性即经纬度，加入到点集合中，然后显示，找一个明显的，添加点击事件
        points.push(position)
      }

      this.points = points
    },
    pointTest () {
      console.log(1)
      hotelPoint().then(res => {
        alert('rrr')
        // console.log(res.data)
      })
    }
  },

  created () {
    this.pointTest()
    this.addPoints()
  }
}
</script>

<style scoped>
    .map {
        width: 80%;
        height: 900px;
    }
</style>
